import React from 'react';
import { Row, Col } from 'antd';
import { TweenOneGroup } from 'rc-tween-one';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';

class Content5 extends React.PureComponent {
  render() {
    const { ...props } = this.props;
    delete props.dataSource;
    delete props.isMobile;
    
    return (
      <div {...props} className="home-page-wrapper content5-wrapper">
        <div className="home-page content5">
          <div key="title" className="title-wrapper">
            <h1 className="title-h1">客户案例</h1>
            <div className="title-content">在这里用一段话介绍服务的案例情况</div>
          </div>
          <OverPack
            className={`content-template ${props.className}`}
            playScale={0.3}
          >
            <TweenOneGroup
              component={Row}
              key="ul"
              enter={{
                y: '+=30',
                opacity: 0,
                type: 'from',
                ease: 'easeInOutQuad',
              }}
              leave={{ y: '+=30', opacity: 0, ease: 'easeInOutQuad' }}
              className="content5-img-wrapper"
              gutter={16}
            >
              <Col className="block" md={6} xs={24}>
                <a className="content5-block-content">
                  <span className="">
                    <img src="/images/T11aVgXc4eXXXXXXXX.svg" height="100%" alt="img" />
                  </span>
                  <p className="">Ant Design</p>
                </a>
              </Col>
              <Col className="block" md={6} xs={24}>
                <a className="content5-block-content">
                  <span className="">
                    <img src="/images/faKjZtrmIbwJvVR.svg" height="100%" alt="img" />
                  </span>
                  <p className="">Ant Motion</p>
                </a>
              </Col>
              <Col className="block" md={6} xs={24}>
                <a className="content5-block-content">
                  <span className="">
                    <img src="/images/T11aVgXc4eXXXXXXXX.svg" height="100%" alt="img" />
                  </span>
                  <p className="">Ant Design</p>
                </a>
              </Col>
              <Col className="block" md={6} xs={24}>
                <a className="content5-block-content">
                  <span className="">
                    <img src="/images/faKjZtrmIbwJvVR.svg" height="100%" alt="img" />
                  </span>
                  <p className="">Ant Motion</p>
                </a>
              </Col>
              <Col className="block" md={6} xs={24}>
                <a className="content5-block-content">
                  <span className="">
                    <img src="/images/T11aVgXc4eXXXXXXXX.svg" height="100%" alt="img" />
                  </span>
                  <p className="">Ant Design</p>
                </a>
              </Col>
              <Col className="block" md={6} xs={24}>
                <a className="content5-block-content">
                  <span className="">
                    <img src="/images/faKjZtrmIbwJvVR.svg" height="100%" alt="img" />
                  </span>
                  <p className="">Ant Motion</p>
                </a>
              </Col>
              <Col className="block" md={6} xs={24}>
                <a className="content5-block-content">
                  <span className="">
                    <img src="/images/T11aVgXc4eXXXXXXXX.svg" height="100%" alt="img" />
                  </span>
                  <p className="">Ant Design</p>
                </a>
              </Col>
              <Col className="block" md={6} xs={24}>
                <a className="content5-block-content">
                  <span className="">
                    <img src="/images/faKjZtrmIbwJvVR.svg" height="100%" alt="img" />
                  </span>
                  <p className="">Ant Motion</p>
                </a>
              </Col>
            </TweenOneGroup>
          </OverPack>
        </div>
      </div>
    );
  }
}

export default Content5;
